<div class="usercenter">
	<div class="uc-head">
		<img src="../../assets/images/usercenter/uc-head-bg.png" />
		<a class="link-security" routerLink="/security">{{'userCenterPage.securityMgmt' | translate}}</a>
		<div class="uc-info-card">
			<div class="uc-info-card-top">
				<h3 class="uc-info-header"><img src="../../assets/images/usercenter/header.png" /></h3>
				<div class="uc-info-level">
					<h3>{{userDel.loginId}}<span>{{'userCenterPage.gjhy' | translate}}</span></h3>
					<div class="growth">
						<!-- <div class="progress"><span style="width:50%"></span></div>
						<p routerLink="/userDel">{{'userCenterPage.czz' | translate}}&nbsp;&nbsp;600&nbsp;/&nbsp;1200
						</p> -->
					</div>
				</div>
				<div class="uc-info-amount">
					<h4>
						<span (click)="toggleAmount()">
							<img src="../../assets/images/usercenter/icon-eye.png" *ngIf="!showAmount" />
						</span>
						<span (click)="toggleAmount()">
							<img src="../../assets/images/usercenter/icon-eye-active.png" *ngIf="showAmount" />
						</span>
						<span>{{'userCenterPage.amount' | translate}}(￥)</span>
					</h4>
					<div class="amount-number" *ngIf="!showAmount">******</div>
					<div class="amount-number" *ngIf="showAmount">{{userDel?.userWalletForUserView?.availableBalance}}
					</div>
				</div>
			</div>
			<div class="uc-info-card-bottom">
				<div [routerLink]="['/gz']" [queryParams]="{type:0}">
					<img src="../../assets/icons/icon-1.png" />
					<span>{{'userCenterPage.icon1' | translate}}</span>
				</div>
				<div [routerLink]="['/gz']" [queryParams]="{type:1}">
					<img src="../../assets/icons/icon-2.png" />
					<span>{{'userCenterPage.icon2' | translate}}</span>
				</div>
				<div routerLink="/userDel">
					<img src="../../assets/icons/icon-3.png" />
					<span>{{'userCenterPage.icon3' | translate}}</span>
				</div>
				<div (click)='onLHCZ()'>
					<img src="../../assets/icons/icon-4.png" />
					<span>{{'userCenterPage.icon4' | translate}}</span>
				</div>
			</div>
		</div>
	</div>
	<!-- <div class="uc-info">
		<div class="uc-info-address">
			<div>
                <img src="../../assets/images/usercenter/icon-qrcode.png" />
				<p>{{'userCenterPage.qrcode' | translate}}：{{userDel?.userWalletForUserView[0]?.address}}</p>
				<a>{{'userCenterPage.copyAddress' | translate}}</a>
			</div>
		</div>
	</div> -->
	<div class="fixed-box" *ngIf="show">
		<div class="copy-address">
			<i class="icon-close" (click)="closeCopyAddress()">╳</i>
			<div class="qrcode">
				<span class="border-left"></span>
				<span class="border-right"></span>
				<span class="border-top"></span>
				<span class="border-bottom"></span>
				<ngx-qrcode id="qrCodeImage" qrc-element-type="url" qrc-class="aclass" qrc-padding="5"
					qrc-errorCorrectionLevel="H" [qrc-value]="userDel?.userWalletForUserView[0]?.address"></ngx-qrcode>
			</div>
			<div class="address">
				<p>{{'userCenterPage.qrcode' | translate}}：<input type="text" id="address" readonly
						[value]="userDel?.userWalletForUserView[0]?.address" /></p>
				<a (click)="copyaddress()">{{'userCenterPage.copyAddress' | translate}}</a>
			</div>
		</div>
	</div>
	<div class="uc-list">
		<div class="uc-list-head">
			<a [ngClass]="{active:active === 1}" (click)="showThis(1)">{{'userCenterPage.order' | translate}}</a>
			<a [ngClass]="{active:active === 2}" (click)="showThis(2)">{{'userCenterPage.log' | translate}}</a>
		</div>
		<div class="uc-list-body">
			<div *ngIf="active === 1" class="uc-order-list">
				<ul class="order-list">
					<li *ngFor="let item of orderList" (click)="goDetail(item)">
						<div class="order-list-title" *ngIf="item.status === 'PENDING'">
							{{'userCenterPage.dzf' | translate}} <countdown [config]="item.config"></countdown>
						</div>
						<div class="order-list-title" *ngIf="item.status !== 'PENDING'">
							{{'userCenterPage.rDate' | translate}}：{{item.createTime.split(" ")[0]}}</div>
						<div class="order-list-info">
							<div class="order-list-no" *ngIf="item.status === 'PAID'">
								{{'userCenterPage.rNo' | translate}}：{{item.id}}<span>{{'userCenterPage.paid'| translate}}</span></div>
							<div class="order-list-no" *ngIf="item.status === 'PREPARING'||item.status === 'RECEIVED'">
								{{'userCenterPage.rNo' | translate}}：{{item.id}}<span>{{'userCenterPage.travel'| translate}}</span></div>
							<div class="order-list-no" *ngIf="item.status === 'COMPLETED'">
								{{'userCenterPage.rNo' | translate}}：{{item.id}}<span>{{'userCenterPage.completed'| translate}}</span></div>
							<img src="../../assets/images/usercenter/img.jpg" />
							<h3><span *ngIf="item.agencyName">{{item.agencyName}}</span>{{item.guideName}}</h3>
							<div class="order-list-btn" *ngIf="item.status === 'PENDING'">
								<a class="pay-btn" (click)="goPay(item)">{{'userCenterPage.qzf' | translate}}</a>
								<a class="cancel-btn" (click)="cancel(item)">{{'cancel' | translate}}</a>
							</div>
							<p class="red" *ngIf="item.status === 'EXPIRED'">{{'userCenterPage.ddgq' | translate}}</p>
							<p class="gray" *ngIf="item.status === 'CANCELED'">{{'userCenterPage.yqx' | translate}}</p>
							<p class="orange" *ngIf="item.status === 'PAID'">{{'order-Page.FASJZ' | translate}}</p>
							<p class="orange" *ngIf="item.status === 'RECEIVED'">{{'order-Page.FASJZ' | translate}}</p>
							<p class="orange" *ngIf="item.status === 'PREPARING'">{{'order-Page.KHGZXC' | translate}}</p>
						</div>
					</li>
					<li class="nodata" *ngIf="orderList&&orderList.length < 1&&!loading1">
						<img src="../../assets/images/usercenter/nodata1.png" />
						<p>{{'userCenterPage.zwyydd' | translate}}</p>
					</li>
				</ul>
			</div>
			<div *ngIf="active === 2" class="uc-log-list">
				<ul class="log-list">
					<li *ngFor="let pay of payList">
						<div class="log-list-title">{{'userCenterPage.tDate' | translate}}：{{pay.date}}</div>
						<div class="log-list-info" *ngFor="let item of pay.list">
							<div class="log-list-no">
								{{'userCenterPage.tNo' | translate}}：{{item.varId}}<span>{{item.createTime.split(" ")[1]}}</span>
							</div>
							<div class="log-list-info-box">
								<h3><img src="../../assets/images/usercenter/USDT.png" /><span>{{item.amount}}
										</span></h3>
								<p>{{item.title}}</p>
							</div>
						</div>
					</li>
					<li class="nodata" *ngIf="payList&&payList.length < 1&&!loading2">
						<img src="../../assets/images/usercenter/nodata2.png" />
						<p>{{'userCenterPage.zwjyjl' | translate}}</p>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

<div class="fixed-box" *ngIf='dialog2Show' >
	<div class="pay-sure-box">
		<i class="icon-close" (click)="closethis()"></i>
		<!-- <h3>{{'userCenterPage.html1' | translate}}</h3>
		<p>{{'userCenterPage.html2' | translate}}</p>
		<span><img src="../../assets/images/usercenter/dwicon.png" alt="">  上海市杨浦区杨树浦路1058号1号楼</span>
		<p>{{'userCenterPage.html3' | translate}}</p>
		<span><img src="../../assets/images/usercenter/PHONEicon.png" alt="">      021-39485748 </span> -->
		<img src="../../assets/images/usercenter/recharge.png" />
		<!-- <p style="text-align:center;">{{'userCenterPage.html5' | translate}}</p> -->
		<p style="text-align:center;">{{'userCenterPage.rechargeWarn' | translate}}</p>
		<div class="btn-box">
			<button weui-button (click)="closethis()">{{'userCenterPage.confirm' | translate}}</button>
		</div>
	</div>
</div>